<template>
  <a-row style="width: 100%; height: 100%">
    <a-col :span="5" style="height: 100%">
      <a-space direction="vertical" style="width: 100%">
        <a-card title="过去三小时" style="width: 100%">
          <RecentAttackNode
            v-for="item in recentAttacks"
            :attack-source="item.attackSource"
            :attack-target="item.attackTarget"
            :event-time="item.eventTime"
          />
        </a-card>
        <a-card title="攻击源分布">
          <div id="attackDistribution" style="width: 100%; height: 200px" />
        </a-card>
        <a-card title="攻击类型分布" style="width: 100%">
          <div id="attackType" style="width: 100%; height: 200px" />
        </a-card>
      </a-space>
    </a-col>
    <a-col :span="14" style="height: 700px">
      <div id="main" style="width: 100%; height: 100%" />
    </a-col>
    <a-col :span="5" style="height: 100%">
      <a-space direction="vertical" style="width: 100%">
        <a-card title="攻击者IP Top10" style="width: 100%">
          <div id="attackIP" style="width: 100%; height: 200px" />
        </a-card>
        <a-card title="被攻击服务分布" style="width: 100%">
          <div id="attackService" style="width: 100%; height: 200px" />
        </a-card>
        <a-card title="系统负载" style="width: 100%">
          <div id="systemPayload" style="width: 100%; height: 200px" />
        </a-card>
      </a-space>
    </a-col>
  </a-row>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import RecentAttackNode from "../components/RecentAttackNode.vue";
import * as echarts from "echarts";

interface IRecentAttacks {
  attackSource: string;
  attackTarget: string;
  eventTime: string;
}

let recentAttacks: IRecentAttacks[] = [
  {
    attackSource: "127.0.0.1:3389",
    attackTarget: "127.0.0.1:22",
    eventTime: "2021-03-14 00:45:36",
  },
  {
    attackSource: "127.0.0.1:3389",
    attackTarget: "127.0.0.1:22",
    eventTime: "2021-03-14 00:45:36",
  },
  {
    attackSource: "127.0.0.1:3389",
    attackTarget: "127.0.0.1:22",
    eventTime: "2021-03-14 00:45:36",
  },
];

@Component({
  data() {
    return {
      recentAttacks,
    };
  },
  components: {
    RecentAttackNode,
  },
  methods: {
    renderMain() {
      const mainEcharts = echarts.init(document.getElementById("main"));
      let mainData = [
        {
          name: "PE路由器1",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [250, 325],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },
        {
          name: "攻击主机",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [700, 350],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0"
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },

        {
          name: "普通主机",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [0, 325],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#000000",
            position: "bottom",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },
        {
          name: "追踪溯源服务器",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [380, 105],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#000000",
            position: "bottom",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },
        {
          name: "路由器2",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [380, 450],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#000000",
            position: "bottom",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },

        {
          name: "子网1",
          x: 400,
          y: 400,
          value: [120, 325],

          fixed: true,
          symbol:
            "image://",
          symbolSize: [60, 40],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0",
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },

        {
          name: "追踪器1",
          x: 200,
          y: 200,
          value: [110, 165],

          fixed: true,
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0",
          },
          category: 1,

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "网络日志采集器1",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0",
          },
          value: [120, 480],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "路由器1",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0",
          },
          value: [380, 260],

          x: 300,
          y: 600,
          fixed: true,
          category: 2,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "子网2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0",
          },
          x: 1000,
          y: 300,
          value: [600, 345],

          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "追踪器2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0"
          },
          x: 1000,
          y: 400,
          value: [610, 175],

          fixed: true,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
          category: 2,
        },
        {
          name: "PE路由器2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0",
          },
          x: 1000,
          y: 600,
          value: [520, 355],

          fixed: true,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
          category: 2,
        },
        {
          name: "网络日志采集器2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#000000",
            position: "bottom",
            //fontSize: "0"
          },
          x: 600,
          y: 200,
          value: [600, 475],

          fixed: true,

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
          category: 2,
        },
      ];
      let mainOption = {
        backgroundColor: "#fff",
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          show: false,
          type: "value",
        },
        tooltip: {},
        series: [
          {
            type: "graph",
            zlevel: 5,

            draggable: false,
            coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
            symbol: "rect",
            symbolOffset: ["15%", 0],

            label: {
              normal: {
                show: true,
              },
            },
            data: mainData,
            links: [
              {
                source: "子网1",
                target: "PE路由器1",
              },
              {
                source: "普通主机",
                target: "子网1",
              },
              {
                source: "路由器1",
                target: "追踪溯源服务器",
              },
              {
                source: "PE路由器1",
                target: "路由器2",
              },
              {
                source: "追踪器1",
                target: "子网1",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "网络日志采集器1",
                target: "子网1",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              // {
              // 	source: "子网2",
              // 	target: "追踪器2",
              // 	lineStyle: {
              // 		normal: {

              // 		},
              // 	},
              // },

              // {
              // 	source: "路由器1",
              // 	target: "子网2",
              // 	lineStyle: {
              // 		normal: {
              // 			// color: "#12b5d0",
              // 		},
              // 	},
              // },
              // {
              // 	source: "子网2",
              // 	target: "网络日志采集器2",
              // },
              {
                source: "子网2",
                target: "追踪器2",
              },
              {
                source: "子网2",
                target: "攻击主机",
              },
              // {
              // 	source: "PE路由器1",
              // 	target: "PE路由器2",
              // 	lineStyle: {
              // 		normal: {
              // 			// color: "#12b5d0",
              // 		},
              // 	},
              // },
              {
                source: "PE路由器1",
                target: "路由器1",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "网络日志采集器2",
                target: "子网2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "路由器1",
                target: "PE路由器2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "PE路由器2",
                target: "子网2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "路由器2",
                target: "PE路由器2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
            ],

            lineStyle: {
              normal: {
                opacity: 1,
                color: "#53B5EA",
                curveness: 0,

                // 12b5d0
                // type: "dashed",
                width: 2,
              },
            },
          },
        ],
      };
      mainEcharts.setOption(mainOption);
    },
    renderSourceDistribution() {
      const attackDistributionEcharts = echarts.init(
        document.getElementById("attackDistribution")
      );
      let attackDistributionData = {
        code: 200,
        data: {
          regionList: [
            { name: "北京", value: "17422" },
            { name: "山东", value: "531" },
            { name: "上海", value: "530" },
            { name: "福建", value: "235" },
            { name: "广东", value: "73" },
            { name: "重庆", value: "67" },
            { name: "河南", value: "57" },
            { name: "北京", value: "50" },
          ],
        },
        msg: "success",
      };
      let d = attackDistributionData.data;
      let listx = [];
      for (let i = 0; i < d.regionList.length; i++) {
        listx.push(d.regionList[i].name);
      }
      let attackDistributionoption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          left: "center",
          data: listx,
          textStyle: {
            color: "#000",
          },
        },
        series: [
          {
            name: "来源地区",
            type: "pie",
            radius: "60%",
            center: ["50%", "40%"],
            label: {
              normal: {
                show: false,
                position: "center",
              },
            },
            data: d.regionList,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      attackDistributionEcharts.setOption(attackDistributionoption);
    },
    renderAttackType() {
      const attackTypeEcharts = echarts.init(
        document.getElementById("attackType")
      );
      let attackTypeData = {
        code: 200,
        data: {
          typeList: [
            { name: "HTTP", value: "19739" },
            { name: "WEB", value: "14443" },
            { name: "VNC", value: "4702" },
            { name: "TELNET", value: "644" },
            { name: "MYSQL", value: "570" },
            { name: "REDIS", value: "187" },
            { name: "MEMCACHE", value: "62" },
            { name: "ES", value: "52" },
            { name: "TFTP", value: "5" },
            { name: "FTP", value: "2" },
          ],
        },
        msg: "success",
      };
      let d = attackTypeData.data;

      let dataN = [];
      let dataV = [];

      for (let i = d.typeList.length - 1; i >= 0; i--) {
        dataN.push(d.typeList[i].name);
        dataV.push(d.typeList[i].value);
      }

      let attackTypeOption = {
        tooltip: {},
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: dataN,
          axisLine: {
            lineStyle: {
              color: "#67c8fd",
            },
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "3%",
          containLabel: true,
        },
        series: [
          {
            data: dataV,
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "inside",
                color: "#000",
              },
            },
            itemStyle: {
              normal: {
                color: "#49b2c0",
              },
            },
          },
        ],
      };
      attackTypeEcharts.setOption(attackTypeOption);
    },
    renderAttackIP() {
      let data = {
        code: 200,
        data: {
          ipList: [
            { name: "56a:e20:1ebd:328e:a563:773e:5f2b:506a", value: "79586" },
            { name: "3814:4c72:1f78:5e26:41ba:81a5:2d5:2582", value: "62607" },
            { name: "2119:aba:639f:ed35:c3f9:b213:17d0:459f", value: "62131" },
            { name: "393a:40e1:d86:9b4f:8ba:ee1c:7275:d6e9", value: "61297" },
            { name: "e4b6:3728:6c7e:5a2a:fb44:d428:f7ee:3041", value: "58550" },
            { name: "d979:2d93:91d8:ea1b:fbab:f148:e5c0:fde8", value: "57082" },
            { name: "2e1e:3e4d:c0d1:be38:a5c:a0b3:a38b:e7d3", value: "54795" },
            { name: "4c9f:8b2d:357d:ee3c:9f28:ae41:3ff8:ff64", value: "54187" },
            { name: "817f:ebca:87db:bdd5:1e32:5771:ca1:443e", value: "52957" },
            { name: "a6f2:5b9a:6ec2:f83f:28ad:1846:106e:b74e", value: "52425" },
          ],
        },
        msg: "success",
      };
      let attackIPOption = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "IP分布",
            type: "pie",
            radius: "30%",
            center: ["50%", "50%"],
            data: data.data.ipList,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      const attackIPEcharts = echarts.init(document.getElementById("attackIP"));
      attackIPEcharts.setOption(attackIPOption);
    },
    renderAttackService() {
      let data = [30, 24, 15, 22, 9];
      let titlename = ["SSH", "MYSQL", "VNC", "REDIS", "PLUG"];
      let valdata = [702, 562, 351, 515, 211];
      let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      let attackServiceOption = {
        //图标位置
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%",
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#000",

              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#000",
                  borderRadius: 15,
                  // padding: 5,
                  align: "center",
                  width: 15,
                  height: 15,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#000",
              },
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barCategoryGap: 50,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function (params) {
                  let num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barCategoryGap: 50,
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          },
        ],
      };

      const attackServiceEcharts = echarts.init(
        document.getElementById("attackService")
      );
      attackServiceEcharts.setOption(attackServiceOption);
    },
    renderSystemPayload() {
      const systemPayloadEcharts = echarts.init(
        document.getElementById("systemPayload")
      );
      let systemPayloadOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b",
            },
          },
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "#000",
            fontSize: "12",
          },
        },
        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "#000",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#000",
              },
            },

            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
            ],
          },
          {
            axisPointer: { show: false },
            axisLine: { show: false },
            position: "bottom",
            offset: 20,
          },
        ],

        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "#000",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#000",
                fontSize: 12,
              },
            },

            splitLine: {
              lineStyle: {
                color: "#000",
              },
            },
          },
        ],
        series: [
          {
            name: "CPU负载",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#0184d5",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            itemStyle: {
              normal: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
            },
            data: [
              30,
              40,
              30,
              40,
              30,
              40,
              30,
              60,
              20,
              40,
              20,
              40,
              30,
              40,
              30,
              40,
              30,
              40,
              30,
              60,
              20,
              40,
              20,
              40,
            ],
          },
          {
            name: "内存负载",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            itemStyle: {
              normal: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
            },
            data: [
              50,
              30,
              50,
              60,
              10,
              50,
              30,
              50,
              60,
              40,
              60,
              40,
              80,
              30,
              50,
              60,
              10,
              50,
              30,
              70,
              20,
              50,
              10,
              40,
              50,
            ],
          },
        ],
      };
      systemPayloadEcharts.setOption(systemPayloadOption);
    },
  },
  mounted() {
    this.renderMain();
    this.renderSourceDistribution();
    this.renderAttackType();
    this.renderAttackIP();
    this.renderAttackService();
    this.renderSystemPayload();
  },
})
export default class Home extends Vue {}
</script>
